<div class="OutDiv">
  <div class="mainPage">
    <div class="leftTree">
      <div class="titleTop">学院/专业管理</div>
      <div style="padding:15px;">
        <app-class-major-tree [isEdit]="true" (classTreeClick)="clickTree($event)"
                              [treeId]="'mainTree11'"></app-class-major-tree>
      </div>
    </div>
    <div class="rightDiv">
      <div class="titleTop">班级管理</div>
      <div class="exciseTableDiv" style="height: auto !important;">
        <div class="searchDiv fl-r" style="margin-bottom: 15px">
          <label>
            <span>班级名称：</span>
            <input nz-input [(ngModel)]="className" placeholder="请输入班级名称"/>
          </label>
          <label style="margin-right: 0">
            <button nz-button style="margin-right:10px" nzType="primary" (click)="search()">查询</button>
            <button nz-button nzType="default" (click)="resetSearch()">重置</button>
          </label>
        </div>
        <div class="tableTop fl-l" style="margin-bottom: 15px" *ngIf="roleManager == 1">
          <button nz-button nzType="primary" (click)="clickAdd()"><i nz-icon nzType="plus" nzTheme="outline"></i>新增
          </button>
          <button nz-button nzType="default"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定删除所选班级吗?"
                  (nzOnCancel)="cancelFn()"
                  (nzOnConfirm)="deleteAll()"
                  [disabled]="canDelete"
                  nzPlacement="top"
          >
            <i nz-icon nzType="delete" nzTheme="outline"></i>删除
          </button>
          <button nz-button nzType="default" (click)="importShow()"><i nz-icon nzType="download" nzTheme="outline"></i>导入
          </button>
          <nz-dropdown [nzTrigger]="'hover'">
            <button nz-dropdown nz-button nzType="default"><i nz-icon nzType="upload"
                                                              nzTheme="outline"></i>导出
            </button>
            <ul nz-menu>
              <li nz-menu-item (click)="exportShow(1)">导出选中</li>
              <li nz-menu-item (click)="exportShow(3)">导出全部</li>
            </ul>
          </nz-dropdown>
        </div>
        <div style="margin-top: 35px">
          <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords? pageInfo.totalRecords:0 }} 条</ng-template>
          <nz-table
            nzBordered
            [nzData]="classList"
            [nzFrontPagination]="false"
            [nzShowPagination]="true"
            [nzPageIndex]="pageInfo.first"
            [nzTotal]="pageInfo.totalRecords"
            [nzShowTotal]="totalTemplate"
            [nzPageSize]="pageInfo.rows"
            [nzLoadingDelay]="1"
            [nzPageSizeOptions]="[10,20,30,50,100]"
            [nzShowQuickJumper]="true"
            [nzShowSizeChanger]="true"
            (nzPageIndexChange)="pageInfo.first = $event;getPage(pageInfo)"
            (nzPageSizeChange)="pageInfo.rows = $event;getPage(pageInfo)"
            (nzCurrentPageDataChange)="currentPageDataChange($event)"
          >
            <thead>
            <tr>
              <th class="tableCheck"
                  nzShowCheckbox
                  [(nzChecked)]="isAllCheck"
                  [nzIndeterminate]="isIndeterminate"
                  (nzCheckedChange)="checkAll($event)"
              ></th>
              <th>校区</th>
              <th>年级</th>
              <th>班级名称</th>
              <th>班主任</th>
              <th>班长</th>
              <th>班长联系电话</th>
              <th>备注</th>
              <th style="width:100px;" *ngIf="roleManager == 1">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of classList">
              <td
                nzShowCheckbox
                [(nzChecked)]="mapOfCheckedId[data.id]"
                (nzCheckedChange)="refreshStatus()"
              ></td>
              <td>{{data.xqmc}}</td>
              <td>{{data.schoolYear}}</td>
              <td>{{data.name}}</td>
              <td>{{data.headTeacher}}</td>
              <td>{{data.monitor}}</td>
              <td>{{data.telphone}}</td>
              <td>
                <span style="width: 200px;display: inline-block;" class="spance" title="{{data.remark}}">{{data.remark}}</span>
              </td>
              <td *ngIf="roleManager == 1">
                <span class="operaFont firOpera" (click)="editClass(data)">编辑</span>
                <span class="operaFont operaTao"
                      nz-popconfirm
                      nzOkType="danger"
                      nzTitle="确定删除该班级吗?"
                      (nzOnConfirm)="deleteClass(data.id)"
                      nzPlacement="top"
                >删除</span>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
  </div>
</div>
<!--新增班级-->
<nz-modal [(nzVisible)]="isVisible"
          nzWidth="530px"
          [nzTitle]="modalTitle"
          [nzContent]="modalContent"
          (nzOnCancel)="isVisible = false"
          [nzFooter]="footModel"
          nzMaskClosable="false"
>
  <ng-template #modalTitle>
    <span *ngIf="!classInfos.id">新增班级</span>
    <span *ngIf="classInfos.id">编辑班级</span>
  </ng-template>
  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm">
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="7">
              校区
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <nz-select class="w100"
                         nzPlaceHolder="请选择"
                         formControlName="xqmc"
                         [(ngModel)]="classInfos.xqmc"
                         (ngModelChange)="changeCampus($event)"
              >
                <nz-option *ngFor="let option of campusList" [nzLabel]="option.keyCode" [nzValue]="option.keyCode"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="7">
              部门
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <nz-tree-select
                style="width: 100%"
                [nzNodes]="collageList"
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择"
                formControlName="collageId"
                [(ngModel)]="classInfos.collageId"
                (ngModelChange)="collegeChange($event)"
              >
              </nz-tree-select>
              <nz-form-explain
                *ngIf="validateForm.get('collageId').dirty && validateForm.get('collageId').errors">
                <span [hidden]="!validateForm.hasError('required','collageId')">部门必填</span>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="7">
              专业
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <nz-select style="width: 100%;"  [(ngModel)]="classInfos.majorId" nzPlaceHolder="请选择"
                         formControlName="majorId">
                <nz-option *ngFor="let po of majorList;" [nzValue]="po.value" nzLabel="{{po.text}}"></nz-option>
              </nz-select>
              <nz-form-explain
                *ngIf="validateForm.get('majorId').dirty && validateForm.get('majorId').errors">
                <span [hidden]="!validateForm.hasError('required','majorId')">专业必填</span>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="7">
              年级
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <nz-select style="width: 100%;" [(ngModel)]="classInfos.schoolYear"
                         nzPlaceHolder="请选择" formControlName="schoolYear">
                <nz-option *ngFor="let item of yearList" [nzValue]="item" [nzLabel]="item"></nz-option>
              </nz-select>
              <nz-form-explain
                *ngIf="validateForm.get('schoolYear').dirty && validateForm.get('schoolYear').errors">
                <span [hidden]="!validateForm.hasError('required','schoolYear')">年级必填</span>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="7">
              班级名称
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <input nz-input placeholder="请输入" [(ngModel)]="classInfos.name" formControlName="name"/>
              <nz-form-explain
                *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">
                <span [hidden]="!validateForm.hasError('required','name')">班级名称必填</span>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="7">
              班主任
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <nz-select style="width: 100%;"  [(ngModel)]="classInfos.headTeacherId" nzPlaceHolder="请选择"
                         formControlName="headTeacherId">
                <nz-option *ngFor="let po of headTeacherList;" [nzValue]="po.id" [nzLabel]="po.name"></nz-option>
              </nz-select>
              <nz-form-explain
                *ngIf="validateForm.get('headTeacherId').dirty && validateForm.get('headTeacherId').errors">
                <span [hidden]="!validateForm.hasError('required','headTeacherId')">班主任必填</span>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label [nzSm]="7">
              班长
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <input nz-input placeholder="请输入" [(ngModel)]="classInfos.monitor" formControlName="monitor"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label [nzSm]="7">
              班长联系电话
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <input nz-input placeholder="请输入" [(ngModel)]="classInfos.telphone" formControlName="telphone"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label [nzSm]="7">
              备注
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <input nz-input placeholder="请输入" [(ngModel)]="classInfos.remark" formControlName="remark"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </ng-template>
  <ng-template #footModel>
    <button nz-button nzType="default" (click)="isVisible = false">取消</button>
    <button nz-button nzType="primary" [disabled]="!validateForm.valid" (click)="submit()">保存</button>
  </ng-template>
</nz-modal>

<!--班级信息导入-->
<nz-modal [(nzVisible)]="showExcelModal"
          nzWidth="680px"
          [nzTitle]="modalTitle3"
          [nzContent]="modalContent3"
          (nzOnCancel)="showExcelModal = false"
          [nzFooter]="footModel3"
          nzMaskClosable="false"
>
  <ng-template #modalTitle3>
    班级信息导入
  </ng-template>
  <ng-template #modalContent3>
    <div class="modal-hei over-y">
      <div class="line-3">
        <span>1.下载导入模板</span>
        <span class="color-blue m-l-xs-5 cursor" (click)="exportExclShow()">点击下载</span>
      </div>
      <div class="line-3">
        <span>2.按条件填写信息</span>
      </div>
      <div class="w100">
        <table class="table table-bordered">
          <thead>
          <tr>
            <th>校区</th>
            <th>学院</th>
            <th>专业</th>
            <th>年级</th>
            <th>班级名称</th>
            <th>班长</th>
            <th>班长联系电话</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>选填</td>
            <td>选填</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="line-3">
        <span>3.上传填好的文档</span>
        <nz-upload
          [nzShowUploadList]="false"
          [nzData]="{'moduleName': 'student'}"
          [(nzFileList)]="fileListImport"
          [nzBeforeUpload]="beforeUpload"
          nzAccept=".xls,.xlsx"
        >
          <span class="color-blue m-l-xs-5 cursor">点击上传 &nbsp;</span>
        </nz-upload>
        <span class="color-blue m-l-xs-5" *ngIf="importExcelName">
            {{importExcelName}}
          <i nz-icon style="margin-left:10px;cursor: pointer;" title="删除" nzType="close-circle" nzTheme="outline"
             (click)="delFile()"></i>
          </span>
      </div>
      <div class="line-3">
        <span>4.点击确定按钮导入文档</span>
      </div>
    </div>
  </ng-template>
  <ng-template #footModel3>
    <button nz-button nzType="default"
            (click)="showExcelModal = false;this.fileListImport = [];this.importExcelName = '';">取消
    </button>
    <button nz-button nzType="primary" (click)="handleUpload()">确定</button>
  </ng-template>
</nz-modal>
